<template>
  <div class="bar-chart-04 chart" ref="barChart04"></div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
const barChart04 = ref(null);
const echarts = inject('$echarts');

const datas = [
  { name: '天然气LNG气化站', value: 2 },
  { name: '管道燃气高中压调压站', value: 4 },
  { name: '管道燃气中中压调压站', value: 3 },
  { name: '其他场站', value: 7 },
];
const xData = datas.map((item) => item.name);
const yData = datas.map((item) => item.value);
const max = Math.max(...yData);
console.log(xData, yData);
const maxData = [max, max, max, max, max];
const option = {
  compCode: 'C202312009',
  backgroundColor: '#003366',
  grid: {
    left: '5%',
    right: '2%',
    bottom: '0%',
    top: '20%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'none',
    },
    formatter: (params) => {
      return (
        params[0].name +
        '<br/>' +
        '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)"></span>' +
        params[0].seriesName +
        ' : ' +
        params[0].value +
        '<br/>'
      );
    },
  },
  xAxis: {
    show: false,
    type: 'value',
  },
  yAxis: [
    {
      type: 'category',
      inverse: true,
      axisLabel: {
        show: false,
        // margin: 15,
        textStyle: {
          color: '#A1B8C3',
          fontSize: 14,
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: xData,
    },
    {
      type: 'category',
      inverse: true,
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        align: 'right',
        padding: [0, 18, 8, 0],
        verticalAlign: 'bottom',
        // lineHeight: 36,
        margin: 15,
        textStyle: {
          color: '#fff',
          fontSize: 14,
        },
        fontFamily: 'BahnschriftStaticBold',
        formatter: (value) => {
          return '{top|' + value + ' ' + '} {unit|个}';
        },
        rich: {
          top: {
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 36,
            fontFamily: 'DIN',
            fontStyle: 'italic',
          },
          unit: {
            color: '#fff',
            fontWeight: 400,
            fontSize: 20,
          },
        },
      },
      data: yData,
    },
  ],
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      // end: 100,
      yAxisIndex: [0, 1],
    },
  ],
  series: [
    {
      name: '个数',
      type: 'bar',
      zlevel: 1,
      label: {
        normal: {
          color: '#fff',
          show: true,
          position: [0, '-30px'],
          textStyle: {
            fontSize: 24,
          },
          formatter: function (a, b) {
            return a.name;
          },
        },
      },
      itemStyle: {
        color: echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: 'rgba(255,255,255,0)',
          },
          {
            offset: 1,
            color: '#2CE9FF',
          },
        ]),
      },
      barWidth: 7,
      data: yData,
    },
    {
      name: '背景',
      type: 'bar',
      barWidth: 7,
      barGap: '-100%',
      data: maxData,
      labelLayout: {
        verticalAlignstring: 'center',
        align: 'center',
      },
      itemStyle: {
        normal: {
          color: 'rgba(31, 57, 107, 1)',
        },
      },
    },

    {
      type: 'scatter',
      symbolSize: 10,
      zlevel: 12,
      itemStyle: {
        color: {
          type: 'radial',
          r: 1,
          colorStops: [
            {
              offset: 0,
              color: '#fff',
            },
            {
              offset: 1,
              color: '#fff',
            },
          ],
          global: false,
        },
      },
      silent: true,
      data: yData,
    },
  ],
};


onMounted(() => {
  const chart = echarts.init(barChart04.value);
  chart.setOption(option);
});

</script>

<style scoped></style>
